/* 导航 */

.nav {
    width: 1920px;
    height: 100px;
    background-color: #000;
    margin: 0 auto;
    text-align: center;
    line-height: 100px;
    color: #fff;
}


/* 导航名称 */

.nav-name {
    float: left;
    width: 415px;
    height: 100px;
    font-size: 30px;
    font-weight: 700;
}


/* 导航内容 */

.nav-content {
    float: left;
    width: 600px;
    height: 100px;
    margin-left: 160px;
}

.nav-content li {
    float: left;
    width: 120px;
    height: 100px;
}

.nav-content li a {
    display: block;
    width: 70px;
    height: 38px;
    margin: 30px auto;
    line-height: 40px;
    color: #fff;
}

.nav-content .on a {
    border-bottom: 2px solid #00A4FF;
    color: #00A4FF;
}

.nav-content li:hover a {
    border-bottom: 2px solid #00A4FF;
    color: #00A4FF;
}


/* 导航右侧登录 */

.nav-login {
    float: right;
    width: 350px;
    height: 100px;
}

.login-time {
    float: left;
    width: 205px;
    height: 100px;
}

.login-btn {
    float: left;
    width: 145px;
    height: 100px;
}

.login-btn .icon-denglu {
    font-size: 22px;
    vertical-align: middle;
}

.login-btn .icon-guanji {
    font-size: 28px;
    vertical-align: middle;
}

.login-btn a {
    color: #fff;
    text-decoration: underline;
}


/* 主体版心 */

.main {
    width: 1920px;
    height: 972px;
    margin: 0 auto;
    background-color: #111;
}


/* 主体左侧 */

.main-left {
    float: left;
    width: 500px;
    height: 912px;
    padding: 60px 35px 0 65px;
    color: #fff;
}


/* 当日能耗 */

.onday {
    width: 500px;
    height: 166px;
}

.onday-text {
    float: left;
    width: 115px;
    height: 85px;
    word-spacing: -2px;
}

.onday-text p {
    margin-top: 10px;
    color: #818181;
    font-size: 13px;
}


/* 动态数字 */

.onday-wrap {
    float: left;
    width: 385px;
    height: 85px;
}

.onday-wrap div {
    float: left;
    width: 62px;
    height: 85px;
    border: 1px solid #04E38A;
    color: #04E38A;
    font-size: 50px;
    font-weight: bolder;
    text-align: center;
    line-height: 85px;
    margin-right: 13px;
    overflow: hidden;
}

.onday-wrap .last-num {
    margin: 0;
}

.onday-wrap div span {
    width: 62px;
    height: 85px;
    display: block;
}

@keyframes moveNum {
    0% {}
    100% {
        transform: translateY(-85px);
    }
}

@keyframes moveNum2 {
    0% {}
    100% {
        transform: translateY(-100px);
    }
}

.onday-bgi {
    float: left;
    width: 485px;
    height: 81px;
    background: url(../images/1.png) no-repeat -10px 0px;
}


/* 小时用能变化 */

.hour-wrap {
    width: 500px;
    height: 315px;
    margin-top: 40px;
}

.ele-water {
    height: 35px;
    margin-top: 15px;
}

.deep,
.shallow {
    float: left;
    width: 90px;
    height: 35px;
    line-height: 35px;
    text-align: center;
}

.deep {
    background-color: #07A466;
    border: 1px solid #22B14C;
}

.shallow {
    background-color: #0B623F;
    border: 1px solid #097D4F;
    color: #818181;
}

#hour-energy {
    width: 500px;
    height: 245px;
}


/* 日用能趋势 */

.day-wrap {
    width: 500px;
    height: 350px;
    margin-top: 40px;
}

.day-energy {
    width: 500px;
    height: 270px;
}


/* 主体右侧 */

.main-right {
    float: left;
    width: 1230px;
    height: 937px;
    padding: 35px 55px 0 35px;
    color: #fff;
}


/* 主体右侧上部 */

.right-top {
    width: 1230px;
    height: 220px;
}


/* 平均日用量＆装机容量 */

.top-avg,
.top-cap {
    float: left;
    width: 280px;
    height: 185px;
    margin-right: 30px;
    padding: 35px 0 0 40px;
    border-radius: 10px;
    background-color: #414141;
    font-size: 18px;
}

.green {
    margin: 10px 0 20px;
    color: #04E38A;
}

.green span {
    font-size: 30px;
}

.gray {
    color: #949494;
    font-size: 14px;
    margin-bottom: 8px;
}

.gray em {
    margin-left: 45px;
}

.avg-num {
    font-size: 14px;
}

.avg-num em {
    color: #04E38A;
    margin-left: 80px;
}

.top-cap .gray em {
    margin-left: 58px;
}

.top-cap .avg-num em {
    color: #fff;
}


/* CHIP */

.top-svg {
    float: left;
    width: 530px;
    height: 220px;
    border-radius: 10px;
    background-color: #414141;
}

.svg-wrap {
    float: left;
    width: 105px;
    height: 180px;
    text-align: center;
    padding: 40px 30px 0px 40px;
}

.chip {
    width: 30px;
    height: 30px;
    position: relative;
    left: 37px;
    filter: drop-shadow(0 3px 5px rgba(4, 227, 138, 0.8))
}

.circle1 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(4, 227, 138, 0.7);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.circle2 {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid rgba(4, 227, 138, 0.3);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.svg-wrap p {
    font-size: 14px;
}

.svg-wrap .sum {
    color: #04E38A;
    font-size: 30px;
    margin: 20px 0 10px;
}


/* 主体右侧中部 */

.right-middle {
    width: 1230px;
    height: 320px;
    padding-top: 30px;
}


/* 饼图 */

.middle-pie {
    float: left;
    width: 670px;
    height: 320px;
    border-radius: 10px;
    background-color: #414141;
}

.pie-energy {
    width: 670px;
    height: 320px;
}


/* 重点关注点位 */

.middle-import {
    float: left;
    width: 530px;
    height: 320px;
    border-radius: 10px;
    background-color: #414141;
    margin-left: 30px;
}

.import-title {
    margin: 5% 0 20px 8%;
    font-size: 18px;
}

.import-con {
    height: 50px;
}

.use-light {
    height: 50px;
    float: left;
    margin: 0 0 0 8%;
    font-size: 14px;
    color: #DEDEDE;
}

.use-light span {
    margin-top: 10px;
    display: block;
}

.use-light .clear {
    color: #1EB775;
}

.use-light .air {
    color: #E7F70C;
}


/* 柱状图＋折线图 */

.import-energy {
    width: 530px;
    height: 170px;
}


/* 主体右侧底部 */

.right-bottom {
    width: 1230px;
    height: 300px;
    margin-top: 40px;
}

.bottom-tltle {
    font-size: 18px;
    margin: 0 0 20px 50px;
}


/* 折线图 */

.bottom-line {
    width: 1230px;
    height: 150px;
}

.bottom-line .line-wrap {
    float: left;
    width: 180px;
    height: 150px;
    margin-right: 25px;
}

.bottom-line .wrap-last {
    float: left;
    width: 180px;
    height: 150px;
    margin: 0;
}


/* 绿色分割框 */

.seg-wrap {
    width: 1230px;
    height: 32px;
}

.green-seg {
    float: left;
    width: 180px;
    height: 20px;
    background-color: #04E38A;
    margin: 10px 25px 2px 0;
}

.last-seg {
    margin-right: 0;
}


/* 表格 */

.bottom-table {
    width: 1230px;
    height: 80px;
}

.bottom-table table {
    float: left;
    width: 180px;
    height: 80px;
    border-collapse: collapse;
    margin-right: 25px;
}

.bottom-table table td {
    width: 55px;
    height: 26px;
    border: 1px solid #797979;
    padding-left: 6px;
    color: #B7B7B7;
    font-size: 14px;
}

.bottom-table table .rows {
    padding: 0;
    text-align: center;
}